<template>
  <ContentWrap class="h-[60%]">
    <!-- 搜索栏 -->
    <el-form ref="queryFormRef" inline v-model="queryParams" label-width="68px">
      <el-form-item label="表名称" prop="name">
        <el-input
          v-model="queryParams.name"
          clearable
          placeholder="请输入表名称"
          @keyup.enter="getList"
        />
      </el-form-item>

      <el-form-item label="表描述" prop="comment">
        <el-input
          v-model="queryParams.comment"
          clearable
          placeholder="请输入表描述"
          @keyup.enter="getList"
        />
      </el-form-item>

      <el-form-item label="一级模块" prop="firstModule">
        <el-input
          v-model="queryParams.firstModule"
          clearable
          placeholder="请输入一级模块"
          @keyup.enter="getList"
        />
      </el-form-item>

      <el-form-item label="二级模块" prop="secondModule">
        <el-input
          v-model="queryParams.secondModule"
          clearable
          placeholder="请输入二级模块"
          @keyup.enter="getList"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button @click="newTable">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->

    <Table
      :columns="databaseTableColumns"
      :page-param="queryParams"
      :page-data="databaseTableData"
      @row-click="handleRowClick"
      @page-change="getList"
      adaptive
      save-key="databaseTable"
      @row-dblclick="(row) => handleUpdate(row)"
    >
      <template #menu="{ row }">
        <context-menu-item label="修改" @click="handleUpdate(row)" />
        <context-menu-item label="删除" @click="handleDelete(row.id)" />
      </template>
    </Table>
  </ContentWrap>
  <ContentWrap class="h-[35%]">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="表字段" name="column">
        <el-table
          ref="columnTable"
          :data="dbColumnList"
          height="300"
          highlight-current-row
          row-key="id"
        >
          <el-table-column type="expand">
            <template #default="scope">
              <el-table
                highlight-current-row
                :data="scope.row.validations"
                style="width: 1100px"
                class="mx-10"
              >
                <el-table-column
                  label="校验注解"
                  prop="validation"
                  min-width="30%"
                  align="center"
                />
                <el-table-column label="校验条件" prop="validationCondition" />
                <el-table-column label="报错信息" align="center" prop="message" />
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="字段列名" min-width="10%" prop="columnName" />
          <el-table-column label="字段描述" min-width="10%" prop="columnComment" />
          <el-table-column label="物理类型" min-width="10%" prop="dataType" />
          <el-table-column label="Java类型" min-width="11%" prop="javaType" />
          <el-table-column label="允许NULL" min-width="6%" prop="nullable" />
          <el-table-column label="默认值" min-width="6%" prop="defaultValue" />
          <el-table-column label="字典类型" min-width="12%" prop="dictType" />
          <el-table-column label="示例" min-width="10%" prop="example" />
          <el-table-column label="前端必传" min-width="6%" prop="required" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="表索引" name="index">
        <el-table :data="dbIndexList" height="700" highlight-current-row>
          <el-table-column label="索引类型" align="center" prop="indexType" min-width="20%" />
          <el-table-column label="索引名称" align="center" prop="indexName" min-width="40%" />
          <el-table-column label="字段" align="center" prop="columnNames" min-width="40%" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="表映射" name="mapping">
        <el-table :data="dbMappingList" height="700" highlight-current-row>
          <el-table-column label="名称" align="center" prop="name" min-width="25%" />
          <el-table-column label="是否是list" align="center" prop="isList" min-width="15%" />
          <el-table-column label="映射表" align="center" prop="mappingTable" min-width="25%" />
          <el-table-column label="注解" align="center" prop="annotate" min-width="25%" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </ContentWrap>
  <!-- 弹窗：编辑数据表 -->
  <DatabaseTableEdit ref="editRef" @success="getList" />
</template>
<script lang="ts" name="DatabaseTable" setup>
import * as CodegenApi from '@/api/infra/codegen'
import DatabaseTableEdit from './DatabaseTableEdit.vue'
import { ElTable } from 'element-plus'
import { formatDate } from '@/utils/formatTime'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const dbTableLoading = ref(true) // 数据源的加载中
const databaseTableData = ref<CodegenApi.DatabaseTableVO[]>([]) // 表的列表
const queryParams = reactive({
  name: undefined,
  comment: undefined,
  firstModule: undefined,
  secondModule: undefined
})
const queryFormRef = ref() // 搜索的表单
const activeName = ref('column')
const editRef = ref()
const dbColumnList = ref<CodegenApi.DatabaseColumnVO[]>([]) // 字段的列表
const dbIndexList = ref<CodegenApi.DatabaseIndexVO[]>([]) // 索引的列表
const dbMappingList = ref<CodegenApi.DatabaseMappingVO[]>([]) // 索引的列表
const databaseTableColumns: TableColumnList = [
  {
    label: '表名称',
    prop: 'name'
  },
  {
    label: '表描述',
    prop: 'comment'
  },
  {
    label: '一级模块',
    prop: 'firstModule'
  },
  {
    label: '二级模块',
    prop: 'secondModule'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '创建时间',
    prop: 'createTime',
    formatter: ({ createTime }) => formatDate(createTime)
  }
]

/** 查询表数据 */
const getList = async () => {
  dbTableLoading.value = true
  try {
    databaseTableData.value = await CodegenApi.getDatabaseTableList(queryParams)
    dbColumnList.value = []
    dbIndexList.value = []
    dbMappingList.value = []
  } finally {
    dbTableLoading.value = false
  }
}

/** 重置操作 */
const resetQuery = async () => {
  queryParams.name = undefined
  queryParams.comment = undefined
  dbColumnList.value = []
  dbIndexList.value = []
  dbMappingList.value = []
  await getList()
}

/** 处理某一行的点击 */
const handleRowClick = async (row: CodegenApi.DatabaseTableVO) => {
  const data = await CodegenApi.getDatabaseTable(row.id)
  dbColumnList.value = data.columns
  dbIndexList.value = data.indexes
  dbMappingList.value = data.mappings
}

const handleUpdate = (row: CodegenApi.DatabaseTableVO) => {
  editRef.value.open('update', row.id)
}

const newTable = () => {
  editRef.value.open('create')
}

/** 初始化 **/
onMounted(async () => {
  await getList()
})

/** 删除操作 */
const handleDelete = async (id: string) => {
  await CodegenApi.deleteDatabaseTable(id)
  await getList()
  message.success(t('common.delSuccess'))
}
</script>
